{extend name="public/father" /}

{block name="main"}
<style>
    .layui-form-pane .layui-form-text{padding: 0 10px;}
    .layui-form-pane .layui-form-label{background: none !important;padding-left: 2px;border: 0;color:#000;}
    .layui-form-pane .layui-form-text input, .layui-form-pane .layui-form-text textarea{border-radius: 3px !important;}
</style>

<div class="layui-card">
    <div class="layui-card-body">

        <blockquote class="layui-elem-quote layui-quote-nm" id="beijingtupian">
            <p>关于 二维码位置 、文字位置的设置，第一个输入框是距离左侧有多远，第二个输入框是距离上侧有多远，数字越小 越靠左\靠上</p>
        </blockquote>

        <form class="layui-form layui-form-pane" method="post" style="margin-top: 10px;">

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">短视频（分享标题）</label>
                <div class="layui-input-block">
                    <select name="alias" id="alias" lay-verify="required">
                        {foreach $dsps as $v}
                        <option value="{$v.alias}">{$v.share_title}</option>
                        {/foreach}
                    </select>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">入口链接（二维码对应的链接）</label>
                <div class="layui-input-block">
                    <input type="text" name="url" id="url" placeholder="入口链接（二维码）" required lay-verify="required" autocomplete="off" class="layui-input">
                    <div style="position: absolute;right: 0px;top: 0px;">
                        <button type="button" class="layui-btn layui-btn-primary" id="zidongshengcheng"><i class="layui-icon layui-icon-link"></i>自动生成</button>
                    </div>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">选择背景图片</label>
                <div class="layui-input-block">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H4f9b759af4a84c45af156ca7a4c2a3c8N.jpg" title="<img src='https://ae01.alicdn.com/kf/H4f9b759af4a84c45af156ca7a4c2a3c8N.jpg' style='width:50px;'>" checked>
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/He95ce6f3f55a4f20a69d0d7cd0e23192S.jpg" title="<img src='https://ae01.alicdn.com/kf/He95ce6f3f55a4f20a69d0d7cd0e23192S.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/Hc92268e6a49f43fb80d42af144374c17t.jpg" title="<img src='https://ae01.alicdn.com/kf/Hc92268e6a49f43fb80d42af144374c17t.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/He92293adf238444d9b1401ddae280cf4E.jpg" title="<img src='https://ae01.alicdn.com/kf/He92293adf238444d9b1401ddae280cf4E.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H78ba5031e4ec4d759daa1ed799bf2af0X.jpg" title="<img src='https://ae01.alicdn.com/kf/H78ba5031e4ec4d759daa1ed799bf2af0X.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/Hacbfb5a0e8c9402a84abb8dce6f2f716Q.jpg" title="<img src='https://ae01.alicdn.com/kf/Hacbfb5a0e8c9402a84abb8dce6f2f716Q.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/Hb76df12f91e2497e988399a6ae3168b04.jpg" title="<img src='https://ae01.alicdn.com/kf/Hb76df12f91e2497e988399a6ae3168b04.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H00eb8ac788624e85a1e3dc26e47e7f11k.jpg" title="<img src='https://ae01.alicdn.com/kf/H00eb8ac788624e85a1e3dc26e47e7f11k.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H705ac767d47e4be3ade292d5aab19f981.jpg" title="<img src='https://ae01.alicdn.com/kf/H705ac767d47e4be3ade292d5aab19f981.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H0f4e28ff0ae44b50ad6e7fda0d4e72d4f.jpg" title="<img src='https://ae01.alicdn.com/kf/H0f4e28ff0ae44b50ad6e7fda0d4e72d4f.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/Hdd1e7a5c08f54bc6a620a3a166b8a69fr.jpg" title="<img src='https://ae01.alicdn.com/kf/Hdd1e7a5c08f54bc6a620a3a166b8a69fr.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H9ceaa30b064940eaba24f27391a830a2N.jpg" title="<img src='https://ae01.alicdn.com/kf/H9ceaa30b064940eaba24f27391a830a2N.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H40a5d62011944af9a9b03fdecc263062G.jpg" title="<img src='https://ae01.alicdn.com/kf/H40a5d62011944af9a9b03fdecc263062G.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H8059f5dc96954b51943f7bae3a8f2591U.jpg" title="<img src='https://ae01.alicdn.com/kf/H8059f5dc96954b51943f7bae3a8f2591U.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H1f04f0ed405443be8d15d13eddd16389D.jpg" title="<img src='https://ae01.alicdn.com/kf/H1f04f0ed405443be8d15d13eddd16389D.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H0bf4a31aa4b34df2b9b93652cc7e27fbb.jpg" title="<img src='https://ae01.alicdn.com/kf/H0bf4a31aa4b34df2b9b93652cc7e27fbb.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/Hec681b3684714ac4a28ccf2a3755ee4cQ.jpg" title="<img src='https://ae01.alicdn.com/kf/Hec681b3684714ac4a28ccf2a3755ee4cQ.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H8055db2b373f4a90a109f9c870753683i.jpg" title="<img src='https://ae01.alicdn.com/kf/H8055db2b373f4a90a109f9c870753683i.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/Hf66cfffadae142e2ae1e435dd7632c36j.jpg" title="<img src='https://ae01.alicdn.com/kf/Hf66cfffadae142e2ae1e435dd7632c36j.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/Hf0a3b4a3d84c4465ab9b35e179d7bb29P.jpg" title="<img src='https://ae01.alicdn.com/kf/Hf0a3b4a3d84c4465ab9b35e179d7bb29P.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H9596d78eb01e46a8b7f5d15fa95dea29c.jpg" title="<img src='https://ae01.alicdn.com/kf/H9596d78eb01e46a8b7f5d15fa95dea29c.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H9596d78eb01e46a8b7f5d15fa95dea29c.jpg" title="<img src='https://ae01.alicdn.com/kf/H9596d78eb01e46a8b7f5d15fa95dea29c.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H363f48b60c884b428ab736d70c810875k.jpg" title="<img src='https://ae01.alicdn.com/kf/H363f48b60c884b428ab736d70c810875k.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H971bae2e0e7647dbb0026665d1568b29B.jpg" title="<img src='https://ae01.alicdn.com/kf/H971bae2e0e7647dbb0026665d1568b29B.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H2ba39aa17e4e4fdaa1a72efd149afa89P.jpg" title="<img src='https://ae01.alicdn.com/kf/H2ba39aa17e4e4fdaa1a72efd149afa89P.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/Hea2b59bcdedf4f528b380088a85b4b89O.jpg" title="<img src='https://ae01.alicdn.com/kf/Hea2b59bcdedf4f528b380088a85b4b89O.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H341cf0bc2a13491d8a1180761db9616cd.jpg" title="<img src='https://ae01.alicdn.com/kf/H341cf0bc2a13491d8a1180761db9616cd.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H8f2af29ebcbf40949714ef05f5d5e1a16.jpg" title="<img src='https://ae01.alicdn.com/kf/H8f2af29ebcbf40949714ef05f5d5e1a16.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H600426bb1a0944688fb93abbe748b0f89.jpg" title="<img src='https://ae01.alicdn.com/kf/H600426bb1a0944688fb93abbe748b0f89.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H72c4abf1ea37441e9a1ce9eb0be04c03f.jpg" title="<img src='https://ae01.alicdn.com/kf/H72c4abf1ea37441e9a1ce9eb0be04c03f.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H25f8275baff24c8c8982c45174d5b529P.jpg" title="<img src='https://ae01.alicdn.com/kf/H25f8275baff24c8c8982c45174d5b529P.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H41b10406712b4c07a8b9bc7d7d125fd8i.jpg" title="<img src='https://ae01.alicdn.com/kf/H41b10406712b4c07a8b9bc7d7d125fd8i.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H59273011f35640e38e20006cb70d3eccn.jpg" title="<img src='https://ae01.alicdn.com/kf/H59273011f35640e38e20006cb70d3eccn.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H159c2d6441a4433f96f1c357cd97a2b8K.jpg" title="<img src='https://ae01.alicdn.com/kf/H159c2d6441a4433f96f1c357cd97a2b8K.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H60bdf5e158ae4ddb9c42a4558ff9f665U.jpg" title="<img src='https://ae01.alicdn.com/kf/H60bdf5e158ae4ddb9c42a4558ff9f665U.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H18daf4e48a81481a938a15468d21c6501.jpg" title="<img src='https://ae01.alicdn.com/kf/H18daf4e48a81481a938a15468d21c6501.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/H69254a0ea80746508401f27202ddab9as.jpg" title="<img src='https://ae01.alicdn.com/kf/H69254a0ea80746508401f27202ddab9as.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/Hf0c82705e4114124adfc665ade5c2dbfA.jpg" title="<img src='https://ae01.alicdn.com/kf/Hf0c82705e4114124adfc665ade5c2dbfA.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/Hbdc47c128b9a4077b53e7598ab8e73b9v.jpg" title="<img src='https://ae01.alicdn.com/kf/Hbdc47c128b9a4077b53e7598ab8e73b9v.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="https://ae01.alicdn.com/kf/Hb513809ef79d4d048987872c02d481d5v.jpg" title="<img src='https://ae01.alicdn.com/kf/Hb513809ef79d4d048987872c02d481d5v.jpg' style='width:50px;'>">
                    <input type="radio" name="touxiang" lay-filter="touxiang" value="0" title="上传">
                </div>
            </div>

            <div class="layui-form-item layui-form-text upload" id="shangchuantouxiang" style="display: none;">
                <label class="layui-form-label" style="color: red;">背景图片</label>
                <div class="layui-input-block">
                    <input type="text" name="bg" value="https://ae01.alicdn.com/kf/H4f9b759af4a84c45af156ca7a4c2a3c8N.jpg" required lay-verify="required" placeholder="背景图片" autocomplete="off" class="layui-input upload-input">
                    <div style="position: absolute;right: 0px;top: 0px;">
                        <img class="upload-img" src="https://ae01.alicdn.com/kf/H4f9b759af4a84c45af156ca7a4c2a3c8N.jpg" style="max-height: 36px;" onclick="showImg(this.src);"><button type="button" class="layui-btn layui-btn-primary upload-button"><i class="layui-icon layui-icon-upload"></i>上传图片</button>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">二维码大小：</label>
                    <div class="layui-input-inline">
                        <input type="number" name="size" value="6" required lay-verify="required|number" autocomplete="off" class="layui-input" style="width: 100px;">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">二维码位置：</label>
                    <div class="layui-input-block">
                        <input type="number" name="bgx" value="100" required lay-verify="required|number" autocomplete="off" class="layui-input" style="width: 80px;display: inline-block;">
                        -
                        <input type="number" name="bgy" value="500" required lay-verify="required|number" autocomplete="off" class="layui-input" style="width: 80px;display: inline-block;">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">添加文字：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="font" value="" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">文字位置：</label>
                    <div class="layui-input-block">
                        <input type="number" name="fontx" value="100" required lay-verify="required|number" autocomplete="off" class="layui-input" style="width: 80px;display: inline-block;">
                        -
                        <input type="number" name="fonty" value="450" required lay-verify="required|number" autocomplete="off" class="layui-input" style="width: 80px;display: inline-block;">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">文字大小</label>
                    <div class="layui-input-inline">
                        <input type="number" name="fontsize" value="24" required lay-verify="required|number" autocomplete="off" class="layui-input" style="width: 100px;">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">文字颜色</label>
                    <div class="layui-input-inline">
                        <div class="layui-input-inline" style="width: 120px;">
                            <input type="text" name="fontcolor" value="#FF5722" placeholder="请选择颜色" class="layui-input" id="fontcolor">
                        </div>
                        <div class="layui-inline" style="left: -11px;">
                            <div id="color-form"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="status" value="1" lay-skin="switch" lay-text="启用|禁用" checked>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">选择</label>
                <div class="layui-input-block">
                    <input type="radio" name="xuanze" value="1" title="生成/查看/不保存" checked>
                    <input type="radio" name="xuanze" value="0" title="生成/入库/保存">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="create">立即提交</button>
                </div>
            </div>
        </form>

    </div>
</div>


<div class="layui-card">
    <div class="layui-card-body">

        <div id="showurl" style="color: #FF5722;margin: 20px 0;font-size: 200%;text-align: center;"></div>
        <div id="showimg" style="text-align: center;"></div>

    </div>
</div>
{/block}


{block name="js"}
<script>

    layui.use(['jquery', 'colorpicker'], function () {
        var $ = layui.jquery, colorpicker = layui.colorpicker;

        //表单赋值
        colorpicker.render({
            elem: '#color-form'
            ,color: '#FF5722'
            ,predefine: true
            ,done: function(color){
                $('#fontcolor').val(color);
            }
        });

    });


    $("#zidongshengcheng").click(function () {
        var alias = $("#alias").val();

        $.get("{:url('getrukouyuming')}", {alias:alias}, function (res) {
            $("#url").val(res.msg);
        }, 'json');
    });

    $("#beijingtupian a").click(function () {
        $("#beijingtupian div").show();
    });

    $("#shouqi").click(function () {
        $("#beijingtupian div").hide();
    });

</script>
{/block}
